JavaScript 记忆化模式：缓存策略与性能提升

在软件开发领域，性能至关重要。JavaScript 作为一种用途广泛的语言，应用于从前端网页开发到 Node.js 服务器端应用的各种环境，通常需要进行优化以确保流畅高效的执行。其中一种能在特定场景下显著提升性能的强大技术就是记忆化 (memoization)。

记忆化是一种优化技术，主要通过存储昂贵函数调用的结果，并在相同输入再次出现时返回缓存的结果，从而加速程序的运行。从本质上讲，这是一种专门针对函数的缓存形式。这种方法对于以下类型的函数尤其有效：

• 纯函数：返回值仅由其输入值决定，没有副作用的函数。
• 确定性函数：对于相同的输入，函数总是产生相同的输出。
• 昂贵函数：计算量大或耗时长的函数（例如，递归函数、复杂计算）。

本文将探讨 JavaScript 中的记忆化概念，深入研究各种模式、缓存策略以及通过实施记忆化可实现的性能提升。我们将通过实际示例来说明如何在不同场景下有效应用记忆化。

理解记忆化：核心概念

记忆化的核心是利用缓存原理。当一个记忆化的函数被一组特定的参数调用时，它首先会检查这些参数的结果是否已经被计算并存储在缓存中（通常是 JavaScript 对象或 Map）。如果在缓存中找到了结果，就立即返回。否则，函数将执行计算，将结果存入缓存，然后再返回结果。

其主要好处在于避免了重复计算。如果一个函数被相同的输入多次调用，记忆化版本只会在第一次执行计算。后续的调用将直接从缓存中检索结果，从而显著提高性能，特别是对于计算密集型操作。

JavaScript 中的记忆化模式

在 JavaScript 中可以采用多种模式来实现记忆化。让我们来看看一些最常见和最有效的模式：

1. 使用闭包实现基本记忆化

这是最基本的记忆化方法。它利用闭包在函数作用域内维护一个缓存。这个缓存通常是一个简单的 JavaScript 对象，其中键代表函数参数，值代表相应的结果。

function memoize(func) {
 const cache = {};
 return function(...args) {
 const key = JSON.stringify(args); // Create a unique key for the arguments
 if (cache[key]) {
 return cache[key]; // Return cached result
 } else {
 const result = func.apply(this, args); // Calculate the result
 cache[key] = result; // Store the result in the cache
 return result; // Return the result
 }
 };
}

// Example: Memoizing a factorial function
function factorial(n) {
 if (n <= 1) {
 return 1;
 }
 return n * factorial(n - 1);
}

const memoizedFactorial = memoize(factorial);

console.time('First call');
console.log(memoizedFactorial(5)); // Calculates and caches
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedFactorial(5)); // Retrieves from cache
console.timeEnd('Second call');

解释：

• `memoize` 函数接收一个函数 `func`作为输入。
• 它在其作用域内（通过闭包）创建一个 `cache` 对象。
• 它返回一个包装了原始函数的新函数。
• 这个包装函数使用 `JSON.stringify(args)` 根据函数参数创建一个唯一的键。
• 它检查 `key` 是否存在于 `cache` 中。如果存在，则返回缓存的值。
• 如果 `key` 不存在，它会调用原始函数，将结果存储在 `cache` 中，并返回结果。

局限性：

• 对于复杂的对象，`JSON.stringify` 可能很慢。
• 对于接受不同顺序参数或接受键相同但顺序不同的对象的函数，键的创建可能会有问题。
• 无法正确处理 `NaN`，因为 `JSON.stringify(NaN)` 返回 `null`。

2. 使用自定义键生成器实现记忆化

为了解决 `JSON.stringify` 的局限性，你可以创建一个自定义的键生成器函数，根据函数的参数生成一个唯一的键。这为你如何索引缓存提供了更多控制，并可能在某些场景下提高性能。

function memoizeWithKey(func, keyGenerator) {
 const cache = {};
 return function(...args) {
 const key = keyGenerator(...args);
 if (cache[key]) {
 return cache[key];
 } else {
 const result = func.apply(this, args);
 cache[key] = result;
 return result;
 }
 };
}

// Example: Memoizing a function that adds two numbers
function add(a, b) {
 console.log('Calculating...');
 return a + b;
}

// Custom key generator for the add function
function addKeyGenerator(a, b) {
 return `${a}-${b}`;
}

const memoizedAdd = memoizeWithKey(add, addKeyGenerator);

console.log(memoizedAdd(2, 3)); // Calculates and caches
console.log(memoizedAdd(2, 3)); // Retrieves from cache
console.log(memoizedAdd(3, 2)); // Calculates and caches (different key)

解释：

• 此模式与基本记忆化类似，但它接受一个额外的参数：`keyGenerator`。
• `keyGenerator` 是一个函数，它接受与原始函数相同的参数，并返回一个唯一的键。
• 这使得键的创建更加灵活和高效，特别是对于处理复杂数据结构的函数。

3. 使用 Map 实现记忆化

JavaScript 中的 `Map` 对象提供了一种更健壮、更多样化的方式来存储缓存结果。与普通的 JavaScript 对象不同，`Map` 允许你使用任何数据类型作为键，包括对象和函数。这就不再需要对参数进行字符串化，并简化了键的创建过程。

function memoizeWithMap(func) {
 const cache = new Map();
 return function(...args) {
 const key = args.join('|'); // Create a simple key (can be more sophisticated)
 if (cache.has(key)) {
 return cache.get(key);
 } else {
 const result = func.apply(this, args);
 cache.set(key, result);
 return result;
 }
 };
}

// Example: Memoizing a function that concatenates strings
function concatenate(str1, str2) {
 console.log('Concatenating...');
 return str1 + str2;
}

const memoizedConcatenate = memoizeWithMap(concatenate);

console.log(memoizedConcatenate('hello', 'world')); // Calculates and caches
console.log(memoizedConcatenate('hello', 'world')); // Retrieves from cache

解释：

• 此模式使用 `Map` 对象来存储缓存。
• 与普通的 JavaScript 对象相比，`Map` 允许你使用任何数据类型作为键，包括对象和函数，这提供了更大的灵活性。
• `Map` 对象的 `has` 和 `get` 方法分别用于检查和检索缓存值。

4. 递归记忆化

记忆化对于优化递归函数尤其有效。通过缓存中间计算的结果，可以避免重复计算，从而显著减少执行时间。

function memoizeRecursive(func) {
 const cache = {};
 function memoized(...args) {
 const key = String(args);
 if (cache[key]) {
 return cache[key];
 } else {
 cache[key] = func(memoized, ...args);
 return cache[key];
 }
 }
 return memoized;
}

// Example: Memoizing a Fibonacci sequence function
function fibonacci(memoized, n) {
 if (n <= 1) {
 return n;
 }
 return memoized(n - 1) + memoized(n - 2);
}

const memoizedFibonacci = memoizeRecursive(fibonacci);

console.time('First call');
console.log(memoizedFibonacci(10)); // Calculates and caches
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedFibonacci(10)); // Retrieves from cache
console.timeEnd('Second call');

解释：

• `memoizeRecursive` 函数接收一个函数 `func` 作为输入。
• 它在其作用域内创建一个 `cache` 对象。
• 它返回一个包装了原始函数的新函数 `memoized`。
• `memoized` 函数检查给定参数的结果是否已在缓存中。如果是，则返回缓存值。
• 如果结果不在缓存中，它会以 `memoized` 函数本身作为第一个参数来调用原始函数。这使得原始函数能够递归地调用自身的记忆化版本。
• 然后将结果存储在缓存中并返回。

5. 基于类的记忆化

对于面向对象编程，记忆化可以在类内部实现，以缓存方法的结果。这对于那些经常被相同参数调用的计算密集型方法非常有用。

class MemoizedClass {
 constructor() {
 this.cache = {};
 }

 memoizeMethod(func) {
 return (...args) => {
 const key = JSON.stringify(args);
 if (this.cache[key]) {
 return this.cache[key];
 } else {
 const result = func.apply(this, args);
 this.cache[key] = result;
 return result;
 }
 };
 }

 // Example: Memoizing a method that calculates the power of a number
 power(base, exponent) {
 console.log('Calculating power...');
 return Math.pow(base, exponent);
 }
}

const memoizedInstance = new MemoizedClass();
const memoizedPower = memoizedInstance.memoizeMethod(memoizedInstance.power);

console.log(memoizedPower(2, 3)); // Calculates and caches
console.log(memoizedPower(2, 3)); // Retrieves from cache

解释：

• `MemoizedClass` 在其构造函数中定义了一个 `cache` 属性。
• `memoizeMethod` 接收一个函数作为输入，并返回该函数的记忆化版本，将结果存储在类的 `cache` 中。
• 这使你可以选择性地对类的特定方法进行记忆化。

缓存策略

除了基本的记忆化模式，还可以采用不同的缓存策略来优化缓存行为和管理其大小。这些策略有助于确保缓存保持高效且不会消耗过多内存。

1. 最近最少使用 (LRU) 缓存

当缓存达到其最大容量时，LRU 缓存会淘汰最近最少使用的项。这种策略确保了最常访问的数据保留在缓存中，而不常使用的数据则被丢弃。

class LRUCache {
 constructor(capacity) {
 this.capacity = capacity;
 this.cache = new Map();
 }

 get(key) {
 if (this.cache.has(key)) {
 const value = this.cache.get(key);
 this.cache.delete(key); // Re-insert to mark as recently used
 this.cache.set(key, value);
 return value;
 } else {
 return undefined;
 }
 }

 put(key, value) {
 if (this.cache.has(key)) {
 this.cache.delete(key);
 }
 this.cache.set(key, value);
 if (this.cache.size > this.capacity) {
 // Remove the least recently used item
 const firstKey = this.cache.keys().next().value;
 this.cache.delete(firstKey);
 }
 }
}

// Example usage:
const lruCache = new LRUCache(3); // Capacity of 3

lruCache.put('a', 1);
lruCache.put('b', 2);
lruCache.put('c', 3);

console.log(lruCache.get('a')); // 1 (moves 'a' to the end)

lruCache.put('d', 4); // 'b' is evicted

console.log(lruCache.get('b')); // undefined
console.log(lruCache.get('a')); // 1
console.log(lruCache.get('c')); // 3
console.log(lruCache.get('d')); // 4

解释：

• 使用 `Map` 来存储缓存，它能维护插入顺序。
• `get(key)` 检索值并重新插入键值对，以将其标记为最近使用过。
• `put(key, value)` 插入键值对。如果缓存已满，则移除最近最少使用的项（即 `Map` 中的第一项）。

2. 最不经常使用 (LFU) 缓存

当缓存已满时，LFU 缓存会淘汰最不经常使用的项。这种策略优先保留访问频率更高的数据，确保其留在缓存中。

class LFUCache {
 constructor(capacity) {
 this.capacity = capacity;
 this.cache = new Map();
 this.frequencies = new Map();
 this.minFrequency = 0;
 }

 get(key) {
 if (!this.cache.has(key)) {
 return undefined;
 }

 const frequency = this.frequencies.get(key);
 this.frequencies.set(key, frequency + 1);
 return this.cache.get(key);
 }

 put(key, value) {
 if (this.capacity <= 0) {
 return;
 }

 if (this.cache.has(key)) {
 this.cache.set(key, value);
 this.get(key);
 return;
 }

 if (this.cache.size >= this.capacity) {
 this.evict();
 }

 this.cache.set(key, value);
 this.frequencies.set(key, 1);
 this.minFrequency = 1;
 }

 evict() {
 let minFreq = Infinity;
 for (const frequency of this.frequencies.values()) {
 minFreq = Math.min(minFreq, frequency);
 }

 const keysToRemove = [];
 this.frequencies.forEach((freq, key) => {
 if (freq === minFreq) {
 keysToRemove.push(key);
 }
 });

 const keyToRemove = keysToRemove[0];
 this.cache.delete(keyToRemove);
 this.frequencies.delete(keyToRemove);
 }
}

// Example usage:
const lfuCache = new LFUCache(2);

lfuCache.put('a', 1);
lfuCache.put('b', 2);
console.log(lfuCache.get('a')); // 1, frequency(a) = 2
lfuCache.put('c', 3); // evicts 'b' because frequency(b) = 1
console.log(lfuCache.get('b')); // undefined
console.log(lfuCache.get('a')); // 1, frequency(a) = 3
console.log(lfuCache.get('c')); // 3, frequency(c) = 2

解释：

• 使用两个 `Map` 对象：`cache` 用于存储键值对，`frequencies` 用于存储每个键的访问频率。
• `get(key)` 检索值并增加其频率计数。
• `put(key, value)` 插入键值对。如果缓存已满，则淘汰最不经常使用的项。
• `evict()` 找到最低的频率计数，并从 `cache` 和 `frequencies` 中移除相应的键值对。

3. 基于时间的过期策略

此策略会在一段时间后使缓存项失效。这对于会随时间变旧或过时的数据非常有用。例如，缓存仅在几分钟内有效的 API 响应。

function memoizeWithExpiration(func, ttl) {
 const cache = new Map();
 return function(...args) {
 const key = JSON.stringify(args);
 const cached = cache.get(key);

 if (cached && cached.expiry > Date.now()) {
 return cached.value;
 } else {
 const result = func.apply(this, args);
 cache.set(key, { value: result, expiry: Date.now() + ttl });
 return result;
 }
 };
}

// Example: Memoizing a function with a 5-second expiration time
function getDataFromAPI(endpoint) {
 console.log(`Fetching data from ${endpoint}...`);
 // Simulate an API call with a delay
 return new Promise(resolve => {
 setTimeout(() => {
 resolve(`Data from ${endpoint}`);
 }, 1000);
 });
}

const memoizedGetData = memoizeWithExpiration(getDataFromAPI, 5000); // TTL: 5 seconds

async function testExpiration() {
 console.log(await memoizedGetData('/users')); // Fetches and caches
 console.log(await memoizedGetData('/users')); // Retrieves from cache

 setTimeout(async () => {
 console.log(await memoizedGetData('/users')); // Fetches again after 5 seconds
 }, 6000);
}

testExpiration();

解释：

• `memoizeWithExpiration` 函数接收一个函数 `func` 和一个以毫秒为单位的生存时间 (TTL) 值作为输入。
• 它将缓存值与一个过期时间戳一起存储。
• 在返回缓存值之前，它会检查过期时间戳是否仍在未来。如果已过期，它将使缓存失效并重新获取数据。

性能提升与注意事项

记忆化可以显著提高性能，特别是对于使用相同输入重复调用的计算密集型函数。性能提升在以下场景中最为明显：

• 递归函数：记忆化可以极大地减少递归调用的次数，从而带来指数级的性能提升。
• 具有重叠子问题的函数：记忆化通过存储子问题的结果并在需要时重用它们，可以避免重复计算。
• 输入频繁相同的函数：记忆化确保对于每一组唯一的输入，函数只执行一次。

然而，在使用记忆化时，权衡以下几点非常重要：

• 内存消耗：记忆化会增加内存使用量，因为它存储了函数调用的结果。对于具有大量可能输入的函数或内存资源有限的应用程序，这可能是一个问题。
• 缓存失效：如果底层数据发生变化，缓存的结果可能会变得陈旧。实施一种缓存失效策略至关重要，以确保缓存与数据保持一致。
• 复杂性：实现记忆化会增加代码的复杂性，特别是对于复杂的缓存策略。在使用记忆化之前，仔细考虑代码的复杂性和可维护性非常重要。

实际示例与用例

记忆化可以应用于广泛的场景以优化性能。以下是一些实际示例：

• 前端网页开发：在 JavaScript 中对昂贵的计算进行记忆化可以提高 Web 应用程序的响应速度。例如，你可以对执行复杂 DOM 操作或计算布局属性的函数进行记忆化。
• 服务器端应用：记忆化可用于缓存数据库查询或 API 调用的结果，从而减轻服务器负载并改善响应时间。
• 数据分析：记忆化可以通过缓存中间计算的结果来加速数据分析任务。例如，你可以对执行统计分析或机器学习算法的函数进行记忆化。
• 游戏开发：记忆化可用于通过缓存常用计算（如碰撞检测或寻路）的结果来优化游戏性能。

结论

记忆化是一种强大的优化技术，可以显著提高 JavaScript 应用程序的性能。通过缓存昂贵函数调用的结果，你可以避免重复计算并减少执行时间。然而，仔细权衡性能提升与内存消耗、缓存失效和代码复杂性之间的利弊非常重要。通过理解不同的记忆化模式和缓存策略，你可以有效地应用记忆化来优化你的 JavaScript 代码并构建高性能的应用程序。